<template>
  <ElDrawer v-model="opened" :title="formType" size="30%" destroy-on-close>
    <ElSkeleton v-if="loading" animated :rows="10" />
    <ElForm v-else :model="form" :rules="rules" ref="formRef" status-icon :disabled="isView">
      <ElFormItem label="种类" :label-width="labelWidth" prop="speciesCode">
        <ElSelect v-model="form.speciesCode" :default-first-option="true">
          <ElOption v-for="item in protectionLevels" :key="item.value" :label="item.label" :value="item.value" />
        </ElSelect>
      </ElFormItem>
      <ElFormItem label="统计时间" :label-width="labelWidth" prop="statisticalTime">
        <el-date-picker v-model="form.statisticalTime" type="year" placeholder="请选择年" format="YYYY年" value-format="YYYY">
        </el-date-picker>
        <!-- <el-date-picker v-model="form.statisticalTime" format="YYYY:MM" placeholder="选择时间"> </el-date-picker> -->
        <!-- <ElInput v-model="form.statisticalTime" /> -->
      </ElFormItem>
      <ElFormItem label="统计数量" :label-width="labelWidth" prop="statisticalNum">
        <ElInput v-model="form.statisticalNum" />
      </ElFormItem>
    </ElForm>
    <template #footer>
      <ElButton v-if="!isView" type="primary" @click="onSaveClicked">保存</ElButton>
      <ElButton @click="onCancelClicked">取消</ElButton>
    </template>
  </ElDrawer>
</template>

<script setup lang="ts">
import { reactive, ref, onMounted, unref, computed } from 'vue'
import { ElForm, ElFormItem, FormRules, FormInstance } from 'element-plus'
import { FormType } from '@/enums'
import { ChangeTrend } from '@api/tby/summarize/changeTrend/interface'
import { getChangeTrendDetail, saveOrUpdateChangeTrend } from '@api/tby/summarize/changeTrend'
import { optionsSpeciesCategory } from '@api/tby/common/speciesCategory'
import { validateIntegerMoreZero } from '@/api/modules/tby/common/common'

const labelWidth = 100
const opened = ref(false)
const loading = ref(true)
const formType = ref<FormType>()
const formRef = ref<FormInstance>()
const form = ref<Partial<ChangeTrend.Form>>({})
const protectionLevels = ref<OptionType[]>([])

onMounted(async () => {
  console.log('进来了')
  const { data } = await optionsSpeciesCategory()
  protectionLevels.value = data
})

// 是否查看
const isView = computed(() => {
  return formType.value === FormType.VIEW
})

// 是否新增
const isAdd = computed(() => {
  return formType.value === FormType.ADD
})

const rules = reactive<FormRules>({
  speciesCode: [{ required: true, message: '请选择种类', trigger: 'blur' }],
  statisticalTime: [{ required: true, message: '请选择统计时间', trigger: 'blur' }],
  statisticalNum: [
    { required: true, message: '请输入统计数量', trigger: 'blur' },
    { validator: validateIntegerMoreZero, trigger: 'blur' }
  ]
})

const open = async (type: FormType, id?: number) => {
  form.value = {}
  formType.value = type
  opened.value = true
  if (isAdd.value) {
    loading.value = false
  } else {
    try {
      const { data } = await getChangeTrendDetail(id!)
      loading.value = false
      form.value = data
    } finally {
      loading.value = false
    }
  }
  formRef.value?.clearValidate()
}

function close() {
  loading.value = true
  opened.value = false
  form.value = {}
}

const onSaveClicked = () => {
  if (!formRef.value) {
    return
  }
  formRef.value?.validate(valid => {
    if (!valid) {
      return
    }
    const formData = { ...unref(form) }
    saveOrUpdateChangeTrend(formData).then(() => {
      sendSuccess()
      close()
    })
  })
}

const onCancelClicked = () => {
  close()
}

defineExpose({
  open,
  close
})

const emit = defineEmits(['success'])

function sendSuccess() {
  emit('success')
}
</script>
